<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>MSPrint Web Interface</title>
    <link href="{{ url_for('static', filename='css/bootstrap.min.css') }}" rel="stylesheet">

    <style>
        .card {
            margin-bottom: 20px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }
        .status-badge {
            font-size: 1rem;
            padding: 0.5rem 1rem;
        }
        .btn-action {
            margin-right: 10px;
        }
    </style>
</head>
<body>
    <div class="container mt-4">
        <h1 class="mb-4">MSPrint Web Interface</h1>
        
        <!-- Status Card -->
        <div class="card">
            <div class="card-header">
                <h5 class="card-title mb-0">Printer Status</h5>
            </div>
            <div class="card-body">
                <div class="d-flex align-items-center">
                    <span class="status-badge badge bg-secondary" id="printerStatus">Not Initialized</span>
                    <button class="btn btn-primary ms-3" onclick="initPrinter()">Initialize Printer</button>
                    <button class="btn btn-info ms-2" onclick="getStatus()">Refresh Status</button>
                </div>
            </div>
        </div>

        <!-- Print Text Card -->
        <div class="card">
            <div class="card-header">
                <h5 class="card-title mb-0">Print Text</h5>
            </div>
            <div class="card-body">
                <div class="mb-3">
                    <label for="textInput" class="form-label">Text to Print</label>
                    <textarea class="form-control" id="textInput" rows="3"></textarea>
                </div>
                <div class="row mb-3">
                    <div class="col-md-6">
                        <label for="alignmentSelect" class="form-label">Alignment</label>
                        <select class="form-select" id="alignmentSelect">
                            <option value="0">Left</option>
                            <option value="1">Center</option>
                            <option value="2">Right</option>
                        </select>
                    </div>
                    <div class="col-md-6">
                        <label for="boldSelect" class="form-label">Bold</label>
                        <select class="form-select" id="boldSelect">
                            <option value="0">Normal</option>
                            <option value="1">Bold</option>
                        </select>
                    </div>
                </div>
                <button class="btn btn-primary" onclick="printText()">Print Text</button>
            </div>
        </div>

        <!-- Print QR Code Card -->
        <div class="card">
            <div class="card-header">
                <h5 class="card-title mb-0">Print QR Code</h5>
            </div>
            <div class="card-body">
                <div class="mb-3">
                    <label for="qrData" class="form-label">QR Code Data</label>
                    <input type="text" class="form-control" id="qrData">
                </div>
                <div class="row mb-3">
                    <div class="col-md-3">
                        <label for="leftMargin" class="form-label">Left Margin</label>
                        <input type="number" class="form-control" id="leftMargin" value="0">
                    </div>
                    <div class="col-md-3">
                        <label for="moduleSize" class="form-label">Module Size</label>
                        <input type="number" class="form-control" id="moduleSize" value="4">
                    </div>
                    <div class="col-md-3">
                        <label for="errorCorrection" class="form-label">Error Correction</label>
                        <input type="number" class="form-control" id="errorCorrection" value="0">
                    </div>
                </div>
                <button class="btn btn-primary" onclick="printQRCode()">Print QR Code</button>
            </div>
        </div>

        <!-- Paper Control Card -->
        <div class="card">
            <div class="card-header">
                <h5 class="card-title mb-0">Paper Control</h5>
            </div>
            <div class="card-body">
                <div class="row mb-3">
                    <div class="col-md-6">
                        <label for="feedLines" class="form-label">Feed Lines</label>
                        <div class="input-group">
                            <input type="number" class="form-control" id="feedLines" value="1">
                            <button class="btn btn-primary" onclick="feedPaper()">Feed</button>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <label for="cutMode" class="form-label">Cut Mode</label>
                        <div class="input-group">
                            <select class="form-select" id="cutMode">
                                <option value="0">Partial Cut</option>
                                <option value="1">Full Cut</option>
                            </select>
                            <button class="btn btn-danger" onclick="cutPaper()">Cut Paper</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="{{ url_for('static', filename='js/jquery-3.7.1.min.js') }}"></script>
    <script src="{{ url_for('static', filename='js/bootstrap.bundle.min.js') }}"></script>
    <script>
        // Initialize printer
        function initPrinter() {
            fetch('/api/init', {
                method: 'POST'
            })
            .then(response => response.json())
            .then(data => {
                if (data.status === 'success') {
                    document.getElementById('printerStatus').className = 'status-badge badge bg-success';
                    document.getElementById('printerStatus').textContent = 'Initialized';
                    alert('Printer initialized successfully');
                } else {
                    alert('Failed to initialize printer: ' + data.message);
                }
            })
            .catch(error => {
                alert('Error initializing printer: ' + error);
            });
        }        // Get printer status
        function getStatus() {
            fetch('/api/status', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({})  // Empty body for POST request
            })
            .then(response => response.json())
            .then(data => {
                if (data.status === 'success') {
                    document.getElementById('printerStatus').textContent = 'Status: ' + data.printer_status;
                } else {
                    alert('Failed to get status: ' + data.message);
                }
            })
            .catch(error => {
                alert('Error getting status: ' + error);
            });
        }

        // Print text
        function printText() {
            const text = document.getElementById('textInput').value;
            const alignment = document.getElementById('alignmentSelect').value;
            const bold = document.getElementById('boldSelect').value;

            fetch('/api/print/text', {
                method: 'POST',
                headers: {
                      'Content-Type': 'application/json'
                },
                body: JSON.stringify({
                    text: text,
                    alignment: parseInt(alignment),
                    bold: parseInt(bold)
                })
            })
            .then(response => response.json())
            .then(data => {
                if (data.status === 'success') {
                    alert('Text printed successfully');
                } else {
                    alert('Failed to print text: ' + data.message);
                }
            })
            .catch(error => {
                alert('Error printing text: ' + error);
            });
        }

        // Print QR code
        function printQRCode() {
            const data = document.getElementById('qrData').value;
            const leftMargin = document.getElementById('leftMargin').value;
            const moduleSize = document.getElementById('moduleSize').value;
            const errorCorrection = document.getElementById('errorCorrection').value;

            fetch('/api/print/qrcode', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({
                    data: data,
                    left_margin: parseInt(leftMargin),
                    module_size: parseInt(moduleSize),
                    error_correction: parseInt(errorCorrection)
                })
            })
            .then(response => response.json())
            .then(data => {
                if (data.status === 'success') {
                    alert('QR code printed successfully');
                } else {
                    alert('Failed to print QR code: ' + data.message);
                }
            })
            .catch(error => {
                alert('Error printing QR code: ' + error);
            });
        }

        // Feed paper
        function feedPaper() {
            const lines = document.getElementById('feedLines').value;

            fetch('/api/feed', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({
                    lines: parseInt(lines)
                })
            })
            .then(response => response.json())
            .then(data => {
                if (data.status === 'success') {
                    alert('Paper fed successfully');
                } else {
                    alert('Failed to feed paper: ' + data.message);
                }
            })
            .catch(error => {
                alert('Error feeding paper: ' + error);
            });
        }

        // Cut paper
        function cutPaper() {
            const mode = document.getElementById('cutMode').value;

            fetch('/api/cut', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({
                    mode: parseInt(mode)
                })
            })
            .then(response => response.json())
            .then(data => {
                if (data.status === 'success') {
                    alert('Paper cut successfully');
                } else {
                    alert('Failed to cut paper: ' + data.message);
                }
            })
            .catch(error => {
                alert('Error cutting paper: ' + error);
            });
        }
    </script>
</body>
</html>